<template>
    <div class="content">
        <!-- head -->
        <Head></Head>
        <!-- maincontent -->
        <div class="mainbox">
            <el-row>
                <el-col :span=6>
                    <div class="leftside">
                        <!-- 监控情况 -->
                        <div class="part1">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                                <div class="alltitle">监控情况</div>
                            </div>
                            <div>
                                <div v-for="item in monitor" :key="item.indx" :data="monitor">
                                    <div style="width:22.4vw;height:1rem;border-bottom: 0.01rem rgb(27,179,217,.38) solid;
                                    margin-top:0.2rem;">
                                        <el-row>
                                            <el-col :span="6">
                                                <img src="../../assets/images/school.jpg" style="width:1.3rem;height:0.8rem;">
                                            </el-col>
                                            <el-col :span="18">
                                                <div style="width:3rem;height:0.5rem;line-height: 0.3rem;color: #fff;">
                                                    <el-row>
                                                        <el-col :span="12">
                                                            <div style="color:#fff;margin-left: 0.4rem;height: 0.4rem;margin-top: 0.02rem;">
                                                                {{item.place}}
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div style="text-align: left;color: #fff;margin-left: 0.4rem;margin-top: 0.02rem;">设备数量：
                                                                <span style="text-shadow: 0rem 0rem 0.05rem #2BF376;color: rgb(255,255,255,.8);"> 
                                                                    {{item.eqpNum}} 
                                                                </span>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row>
                                                        <el-col :span="12">
                                                           <div style="color:#fff;margin-left: 0.4rem;margin-left: 0.4rem;margin-top: 0.05rem;">  正常数量：
                                                                <span style="text-shadow: 0rem 0rem 0.1rem #2BF376;color: rgba(43, 243, 118, .7);">   
                                                                    {{item.isGood}}
                                                                </span> 
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div style="text-align: left;color: #fff;margin-left: 0.4rem;margin-top: 0.05rem;">故障数量：
                                                                <span style="color:rgba(254, 148, 96, .7);text-shadow: 0rem 0rem 0.05rem #FE9460;">
                                                                    {{item.isBad}} 
                                                                </span>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 人员流动情况 -->
                        <div class="part2">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;margin-top: 0.6rem;">
                                <div class="alltitle" style="width:1.4rem">人员流动情况</div>
                            </div>
                            <div class="showTwoInfo">
                                <div style="margin-top:0.2rem">
                                    <el-row>
                                        <el-col :span="12">
                                            <div>
                                                <div style="float:left">
                                                    <img src="../../assets/images/personnel.png" style="width:0.8rem;height:0.7rem;">
                                                </div>
                                                <div>
                                                    <div style="font-size:0.26rem;color:#fff;text-shadow: 0 0 0.1rem rgba(72, 235, 253, 1);letter-spacing: 0.03rem;">
                                                        &nbsp;&nbsp;{{today}}
                                                    </div>
                                                    <div style="font-size:0.13rem;color:#fff;letter-spacing: 0.03rem;">&emsp;今日进出人数  </div>
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div>
                                                <div style="float:right">
                                                    <div style="font-size:0.26rem;color:#fff;text-shadow: 0 0 0.1rem rgba(72, 235, 253, 1);letter-spacing: 0.03rem;">
                                                        {{yesterday}}
                                                    </div>
                                                    <div style="font-size:0.13rem;color:#fff;letter-spacing: 0.03rem;">  昨日进出人数  </div>
                                                </div>
                                                <div style="float:right;">
                                                    <img src="../../assets/images/personnel.png" style="width:0.8rem;height:0.7rem;margin-left: -1rem;">
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div>
                                <div id="category3" style="width: 22.4vw; height: 30vh"></div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span=12>
                    <div style="height:8.15rem;">&emsp;</div>
                    <div style="width: 100%;text-align: center; ">
                    <Navbar></Navbar>
                    </div>
                </el-col>
                <el-col :span=6>
                    <div class="rightside">
                        <!-- 监控画面 -->
                        <div class="part4">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                                <div class="alltitle">监控画面</div>
                            </div>
                            <div v-for="item in monitorList" :key="item.index" :data="monitorList">
                                <div style="width:22.4vw;height:1.6rem;background-color: #fff;margin: 0.2rem 0 0.35rem 0;">&emsp;

                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import Navbar from "../components/Navbar";
import Head from '../components/head';
import $ from "jquery";

export default{
    components: { Navbar , Head },

    data(){
        return{
            monitor:[
                {place:'1号楼',eqpNum:'123',isGood:'121',isBad:'2'},
                {place:'2号楼',eqpNum:'223',isGood:'221',isBad:'2'},
                {place:'3号楼',eqpNum:'123',isGood:'121',isBad:'2'},
            ],
            today:2134,
            yesterday:2011,
            peopleList:[500,600,520,570,1000,1400,1500,1300,1200,1400,1500,1200],
            monitorList:[
                {link:"http://XXXXXXXx"},
                {link:"http://XXXXXXXx"},
                {link:"http://XXXXXXXx"},
                {link:"http://XXXXXXXx"},
            ]
        }
    },
    mounted() {

        $(document).ready(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 20 });
        $(window).resize(function () {
            var whei = $(window).width();
            $("html").css({ fontSize: whei / 20 });
        });
        });

        this.getCategory3();
    },
    methods:{

        getCategory3(){
            let myChart8 = this.$echarts.init(document.getElementById("category3"));
            var option;
            option = {
                dataZoom: [
                    {
                        // 第一个 dataZoom 组件
                        type: "inside",
                        xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
                        startValue: 0, // 数据窗口范围的起始数值index
                        endValue: 5, // 数据窗口范围的结束数值index，即一次性展示多少个
                    },
                ],
                grid: {
                    left: '1%',
                    right: '0.1%',
                    bottom: '13%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisTick: {
                        show: false, 
                    },
                    axisLine:{
                        lineStyle: {color: 'rgba(27, 179, 217, .38)'}
                    },
                    axisLabel: {
                        rotate: 40,
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    name: "数量（人）",
                    // nameGap: '25',
                    nameTextStyle: {
                        padding: [0, 0, 12, -14] // 上右下左与原位置距离
                    },
                    max: 2000, //最大刻度值
                    interval: 500, //刻度值间隔值
                    splitLine: {
                        lineStyle: {
                            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                            color: "rgb(255,255,255,0.1)", //网格线颜色
                        },
                    },
                    axisTick: {
                        show: false, 
                    },
                    axisLine: {
                        show: false, 
                    },
                },
                series: [
                    {
                    name: '人员流动情况',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color:'rgb(72, 235, 253)'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(72, 235, 253,.73)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(72, 235, 253, .0)'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: this.peopleList
                  },
                ],
                textStyle: {
                    color: "#fff", // 标题颜色
                },
            };
            option && myChart8.setOption(option);
            window.addEventListener(
                "resize",
                () => {
                myChart8.resize();
                },
                false
            );
            setInterval(() => {
                if (option.dataZoom[0].endValue == option.series[0].data.length - 1) {
                option.dataZoom[0].endValue = 5;
                option.dataZoom[0].startValue = 0;
                } else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                }
                myChart8.setOption(option);
            }, 3000);
        }
    }
}
</script>
<style>
body {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: "微软雅黑";
}
body {
  background: #010827 url(../../assets/images/bg1.jpg) center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #666;
  font-size: 0.1rem;
  overflow: hidden;
}
.alltitle {
  width: 1rem;
  background-color: #055A8B;
  margin: 0.15rem 0 0.05rem 0;
  border-left: rgb(27,233,231) 0.03rem solid;
  font-size: 0.17rem;
  color: rgb(255, 255, 255, 1);
  text-align: center;
}
.part1{
  margin: 0.4rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.4s;
}
.part2{
  margin: -0.27rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.2s;
}
.leftside{
  height: 8.7rem;
  background: url(../../assets/images/left.png) no-repeat center center ;
  background-size: 100% 100%;
  margin-left: 0.1rem;
  margin-top: -0.15rem;
}
.rightside{
  height: 8.7rem;
  background: url(../../assets/images/right.png) no-repeat center center ;
  background-size: 100% 100%;
  margin-right: 0.1rem;
  margin-top: -0.15rem;
}
</style>